<template>
  <h1>{{ number }}</h1>
  <button @click="btn(1)">点击加1</button>
  <button @click="btn(10)">点击加10</button>
</template>

<script>
  /* 
    **前置说明:** 
      1. setup 需要有返回值, 只有返回的值才能在模板中使用
      2. 默认普通的数据, 不是响应式的
    reactive 函数
      作用: 传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据 （返回该对象的响应式代理）
      💥注意：
        1. 必须是传入复杂类型数据，普通类型数据 reactive 不处理，控制台会有警告
        2. 自动导入会有问题，需要手动修改成 improt { reactive } from 'vue'
  */
  import { reactive } from "vue";
  export default {
    name: "App",
    setup() {
      const number = reactive({ value: 0 });
      const btn = (val) => {
        number.value += val;
        console.log("number", number.value);
      };
      return { number, btn };
    },
  };
</script>
